<template>
  <qc-page-table
    ref="dictionaryTableRef"
    :columns="columns"
    :loadData="loadData"
    :rowKey="(record) => record[primaryKey]"
  >
    <template #toolbarTitle>
      <span> {{ t('org.dictionary.dictionaryTableTitle') }} </span>
    </template>
    <template #toolbarButton>
      <qc-add-button @click="addButtonClick"></qc-add-button>
      <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
    </template>
    <template #customCodeId="{ text, record }">
      <span class="qc-link" @click="editDictioanryClick(record)">
        {{ text }}
      </span>
    </template>
  </qc-page-table>

  <a-modal v-if="showModal" v-model:visible="showModal" @ok="handleOk" @cancel="handleCancel">
    <template #title> {{ modalTitle }} </template>
    <dictionary-form
      ref="dictionaryFormRef"
      :dictionaryId="currentDictionaryId"
      :codeItemId="currentCodeItemId"
      @submit-success="submitSuccess"
    ></dictionary-form>
  </a-modal>
</template>
<script lang='ts'>
import { defineComponent, onMounted, ref, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import dictionaryApi from '/@/api/org/dictionary'
import { useModelPageTable } from '/@/kit/model-kit'
import { dictionaryTableColumns } from '../interface'
import DictionaryForm from './dictionary-form.vue'
export default defineComponent({
  name: 'DictionaryTable',
  props: {
    codeItemId: String,
  },
  components: {
    DictionaryForm,
  },
  setup(props) {
    const { t } = useI18n()
    const dictionaryTableRef = ref(null)
    const dictionaryFormRef = ref(null)
    const queryParam = { codeItemId: props.codeItemId }
    const { primaryKey, loadData, searchTable, reloadTable, deleteSelectData } = useModelPageTable(
      dictionaryTableRef,
      dictionaryApi,
      queryParam
    )
    const dictionaryState = reactive({
      columns: dictionaryTableColumns,
      primaryKey,
      queryParam,
      loadData,
      search: () => reloadTable(),
      addButtonClick: () => {
        dictionaryState.showModal = true
        dictionaryState.modalTitle = t('org.dictionary.addDictionaryTitle')
        dictionaryState.currentCodeItemId = props.codeItemId
      },
      editDictioanryClick: (item: any) => {
        dictionaryState.showModal = true
        dictionaryState.modalTitle = t('org.dictionary.editDictionaryTitle')
        dictionaryState.currentDictionaryId = item.dictionaryId
      },
      deleteButtonClick: () => deleteSelectData(),
      currentDictionaryId: null,
      currentCodeItemId: null,
      ////////弹窗
      showModal: false,
      modalTitle: null,
      handleOk: () => dictionaryFormRef.value.onSubmit(),
      handleCancel: () => {
        dictionaryState.currentDictionaryId = null
        dictionaryState.currentCodeItemId = null
      },
      submitSuccess: () => {
        dictionaryState.showModal = false
        dictionaryState.currentDictionaryId = null
        dictionaryState.currentCodeItemId = null
        reloadTable()
      },
    })
    onMounted(() => searchTable())
    return {
      t,
      dictionaryTableRef,
      dictionaryFormRef,
      ...toRefs(dictionaryState),
    }
  },
})
</script>